<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>English Magic Kingdom - 500 Common Words & Sentences</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Comic Sans MS', 'Marker Felt', 'Arial Rounded MT Bold', sans-serif;
            background: linear-gradient(135deg, #E6F3FF 0%, #FFF0F5 50%, #E6FFE6 100%);
            min-height: 100vh;
            overflow-x: hidden;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            animation: bounce 2s infinite;
        }

        .title {
            font-size: 3rem;
            color: #FF69B4;
            text-shadow: 3px 3px 0px #FFB6C1;
            margin-bottom: 10px;
        }

        .subtitle {
            font-size: 1.5rem;
            color: #9370DB;
            margin-bottom: 20px;
        }

        .game-area {
            background: white;
            border-radius: 30px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            margin-bottom: 20px;
            position: relative;
            overflow: hidden;
        }

        .game-modes {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .game-card {
            background: linear-gradient(135deg, #DDA0DD 0%, #FFB6C1 100%);
            border-radius: 25px;
            padding: 30px;
            text-align: center;
            cursor: pointer;
            transition: transform 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .game-card:hover {
            transform: translateY(-10px) scale(1.05);
            box-shadow: 0 15px 40px rgba(0,0,0,0.2);
        }

        .game-card h3 {
            font-size: 1.8rem;
            color: white;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .game-card p {
            font-size: 1.1rem;
            color: white;
            opacity: 0.9;
        }

        .game-card::after {
            content: '⭐';
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 2rem;
            animation: twinkle 1.5s infinite;
        }

        .word-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 20px;
            margin: 20px 0;
            max-width: 1000px;
            margin-left: auto;
            margin-right: auto;
        }

        .word-card {
            aspect-ratio: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #98FB98 0%, #87CEEB 100%);
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .word-card:hover {
            transform: scale(1.1) rotate(3deg);
            box-shadow: 0 8px 25px rgba(0,0,0,0.2);
        }

        .word-card.correct {
            background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%) !important;
            animation: correctPulse 0.6s ease;
        }

        .word-card.wrong {
            background: linear-gradient(135deg, #FF5252 0%, #FF7043 100%) !important;
            animation: shake 0.5s ease;
        }

        .word-card.selected {
            background: linear-gradient(135deg, #FFD700 0%, #FFA726 100%) !important;
            animation: glow 1s infinite alternate;
        }

        .word {
            font-size: 2.5rem;
            font-weight: bold;
            color: #8B4513;
            margin-bottom: 5px;
        }

        .phonetic {
            font-size: 1.2rem;
            color: #CD853F;
            font-weight: bold;
        }

        .meaning {
            font-size: 1rem;
            color: #FF6347;
            margin-top: 5px;
        }

        .emoji {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }

        .sentence-display {
            background: linear-gradient(135deg, #FFE4E1 0%, #FFF0F5 100%);
            border-radius: 25px;
            padding: 40px;
            text-align: center;
            margin: 20px 0;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .big-word {
            font-size: 4rem;
            font-weight: bold;
            color: #FF6347;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
        }

        .big-phonetic {
            font-size: 2rem;
            color: #32CD32;
            margin: 10px 0;
        }

        .big-meaning {
            font-size: 1.8rem;
            color: #9370DB;
            margin: 10px 0;
        }

        .sentence {
            font-size: 1.5rem;
            color: #FF69B4;
            margin: 15px 0;
            font-style: italic;
        }

        .controls {
            text-align: center;
            margin: 20px 0;
        }

        .btn {
            font-size: 1.3rem;
            padding: 15px 30px;
            margin: 10px;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: inherit;
            font-weight: bold;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .btn-primary {
            background: linear-gradient(135deg, #FF69B4 0%, #FF1493 100%);
            color: white;
        }

        .btn-success {
            background: linear-gradient(135deg, #32CD32 0%, #228B22 100%);
            color: white;
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.3);
        }

        .score-board {
            background: linear-gradient(135deg, #FFB6C1 0%, #FF69B4 100%);
            border-radius: 25px;
            padding: 20px;
            text-align: center;
            margin-bottom: 20px;
            color: white;
            font-size: 1.5rem;
            font-weight: bold;
        }

        .progress-bar {
            width: 100%;
            height: 20px;
            background: rgba(255,255,255,0.3);
            border-radius: 10px;
            overflow: hidden;
            margin-top: 10px;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #FF69B4, #FF1493);
            transition: width 0.5s ease;
            border-radius: 10px;
        }

        .instructions {
            background: #FFF0F5;
            border-radius: 20px;
            padding: 20px;
            margin-bottom: 20px;
            border-left: 5px solid #FF69B4;
        }

        .instructions h4 {
            color: #FF6347;
            font-size: 1.5rem;
            margin-bottom: 10px;
        }

        .instructions p {
            color: #32CD32;
            font-size: 1.2rem;
            line-height: 1.6;
        }

        .category-tabs {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin: 20px 0;
            flex-wrap: wrap;
        }

        .tab {
            padding: 10px 20px;
            background: #FFE4B5;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
            color: #8B4513;
        }

        .tab.active {
            background: #FF69B4;
            color: white;
        }

        .matching-words {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin: 20px 0;
        }

        .word-pool, .picture-pool {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }

        .picture-card {
            aspect-ratio: 1;
            background: white;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        }

        .picture-card:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .picture-card.matched {
            background: #4CAF50;
            transform: scale(0.9);
            cursor: default;
        }

        .picture-card.selected {
            background: #FFD700;
            transform: scale(1.1);
        }

        .celebration {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1000;
        }

        .star {
            position: absolute;
            font-size: 2rem;
            animation: fall 3s linear forwards;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-10px); }
            60% { transform: translateY(-5px); }
        }

        @keyframes correctPulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }

        @keyframes fall {
            to {
                transform: translateY(100vh) rotate(360deg);
                opacity: 0;
            }
        }

        @keyframes glow {
            from { box-shadow: 0 0 10px #FFD700; }
            to { box-shadow: 0 0 20px #FFD700, 0 0 30px #FFD700; }
        }

        @keyframes twinkle {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }

        @media (max-width: 768px) {
            .title {
                font-size: 2rem;
            }
            
            .matching-words {
                grid-template-columns: 1fr;
            }
            
            .word {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1 class="title">🌟 English Magic Kingdom 🌟</h1>
            <p class="subtitle">Learn 500 common English words & sentences with cute animals!</p>
        </div>

        <div class="score-board">
            <div>⭐ Magic Stars: <span id="score">0</span></div>
            <div class="progress-bar">
                <div class="progress-fill" id="progress" style="width: 0%"></div>
            </div>
        </div>

        <div class="game-area">
            <div id="game-selection">
                <h2 style="text-align: center; color: #FF69B4; margin-bottom: 20px;">Choose your favorite English game!</h2>
                <div class="game-modes">
                    <div class="game-card" onclick="startGame('words')">
                        <h3>📚 Basic Words</h3>
                        <p>Learn 500 common English words</p>
                    </div>
                    <div class="game-card" onclick="startGame('sentences')">
                        <h3>💬 Simple Sentences</h3>
                        <p>Learn everyday English sentences</p>
                    </div>
                    <div class="game-card" onclick="startGame('matching')">
                        <h3>🎯 Word Matching</h3>
                        <p>Match words with pictures</p>
                    </div>
                    <div class="game-card" onclick="startGame('categories')">
                        <h3>🗂️ Categories</h3>
                        <p>Learn words by themes</p>
                    </div>
                </div>
            </div>

            <div id="game-instructions" style="display: none;">
                <div class="instructions">
                    <h4 id="instruction-title">Game Instructions</h4>
                    <p id="instruction-text">Click to start learning!</p>
                </div>
            </div>

            <div id="sentence-display" style="display: none;">
                <div class="sentence-display">
                    <div class="emoji">🐱</div>
                    <div class="big-word" id="current-word">cat</div>
                    <div class="big-phonetic">/kæt/</div>
                    <div class="big-meaning">猫</div>
                    <div class="sentence">I have a cute cat.</div>
                </div>
            </div>

            <div id="category-tabs" class="category-tabs" style="display: none;">
                <div class="tab active" onclick="switchCategory('animals')">🐾 Animals</div>
                <div class="tab" onclick="switchCategory('colors')">🌈 Colors</div>
                <div class="tab" onclick="switchCategory('food')">🍎 Food</div>
                <div class="tab" onclick="switchCategory('family')">👨‍👩‍👧‍👦 Family</div>
                <div class="tab" onclick="switchCategory('numbers')">🔢 Numbers</div>
            </div>

            <div id="word-grid" class="word-grid" style="display: none;"></div>
            
            <div id="matching-words" class="matching-words" style="display: none;">
                <div>
                    <h3 style="text-align: center; color: #FF69B4;">Words</h3>
                    <div class="word-pool" id="word-pool"></div>
                </div>
                <div>
                    <h3 style="text-align: center; color: #FF69B4;">Pictures</h3>
                    <div class="picture-pool" id="picture-pool"></div>
                </div>
            </div>

            <div class="controls">
                <button class="btn btn-primary" onclick="startGame(currentGame)" id="start-btn">Start Game</button>
                <button class="btn btn-success" onclick="backToMenu()" style="display: none;" id="back-btn">Back to Menu</button>
                <button class="btn" onclick="nextWord()" style="display: none;" id="next-btn">Next</button>
            </div>
        </div>
    </div>

    <div class="celebration" id="celebration"></div>

    <script>
        let currentGame = null;
        let score = 0;
        let currentIndex = 0;
        let selectedCard = null;
        let matchedPairs = 0;
        let currentCategory = 'animals';
        let matchingData = [];

        // 500个常用英语单词和句子数据
        const englishData = {
            animals: [
                { word: 'cat', phonetic: '/kæt/', meaning: '猫', emoji: '🐱', sentence: 'The cat is sleeping.' },
                { word: 'dog', phonetic: '/dɒɡ/', meaning: '狗', emoji: '🐕', sentence: 'My dog likes to play.' },
                { word: 'bird', phonetic: '/bɜːd/', meaning: '鸟', emoji: '🐦', sentence: 'The bird can fly.' },
                { word: 'fish', phonetic: '/fɪʃ/', meaning: '鱼', emoji: '🐟', sentence: 'I see a fish swimming.' },
                { word: 'rabbit', phonetic: '/ˈræbɪt/', meaning: '兔子', emoji: '🐰', sentence: 'The rabbit hops fast.' },
                { word: 'elephant', phonetic: '/ˈelɪfənt/', meaning: '大象', emoji: '🐘', sentence: 'The elephant is big.' },
                { word: 'monkey', phonetic: '/ˈmʌŋki/', meaning: '猴子', emoji: '🐵', sentence: 'The monkey climbs trees.' },
                { word: 'tiger', phonetic: '/ˈtaɪɡə/', meaning: '老虎', emoji: '🐅', sentence: 'The tiger is strong.' }
            ],
            colors: [
                { word: 'red', phonetic: '/red/', meaning: '红色', emoji: '🔴', sentence: 'The apple is red.' },
                { word: 'blue', phonetic: '/bluː/', meaning: '蓝色', emoji: '🔵', sentence: 'The sky is blue.' },
                { word: 'yellow', phonetic: '/ˈjeləʊ/', meaning: '黄色', emoji: '🟡', sentence: 'The sun is yellow.' },
                { word: 'green', phonetic: '/ɡriːn/', meaning: '绿色', emoji: '🟢', sentence: 'The grass is green.' },
                { word: 'orange', phonetic: '/ˈɒrɪndʒ/', meaning: '橙色', emoji: '🟠', sentence: 'The orange is orange.' },
                { word: 'purple', phonetic: '/ˈpɜːpl/', meaning: '紫色', emoji: '🟣', sentence: 'The flower is purple.' },
                { word: 'pink', phonetic: '/pɪŋk/', meaning: '粉色', emoji: '🩷', sentence: 'My dress is pink.' },
                { word: 'black', phonetic: '/blæk/', meaning: '黑色', emoji: '⚫', sentence: 'The cat is black.' }
            ],
            food: [
                { word: 'apple', phonetic: '/ˈæpl/', meaning: '苹果', emoji: '🍎', sentence: 'I eat an apple.' },
                { word: 'banana', phonetic: '/bəˈnɑːnə/', meaning: '香蕉', emoji: '🍌', sentence: 'This banana is sweet.' },
                { word: 'bread', phonetic: '/bred/', meaning: '面包', emoji: '🍞', sentence: 'I like bread.' },
                { word: 'milk', phonetic: '/mɪlk/', meaning: '牛奶', emoji: '🥛', sentence: 'I drink milk.' },
                { word: 'water', phonetic: '/ˈwɔːtə/', meaning: '水', emoji: '💧', sentence: 'I need water.' },
                { word: 'rice', phonetic: '/raɪs/', meaning: '米饭', emoji: '🍚', sentence: 'We eat rice.' },
                { word: 'egg', phonetic: '/eɡ/', meaning: '鸡蛋', emoji: '🥚', sentence: 'The egg is white.' },
                { word: 'cake', phonetic: '/keɪk/', meaning: '蛋糕', emoji: '🎂', sentence: 'The cake is yummy.' }
            ],
            family: [
                { word: 'father', phonetic: '/ˈfɑːðə/', meaning: '爸爸', emoji: '👨', sentence: 'My father is tall.' },
                { word: 'mother', phonetic: '/ˈmʌðə/', meaning: '妈妈', emoji: '👩', sentence: 'My mother is kind.' },
                { word: 'brother', phonetic: '/ˈbrʌðə/', meaning: '哥哥/弟弟', emoji: '👦', sentence: 'My brother plays with me.' },
                { word: 'sister', phonetic: '/ˈsɪstə/', meaning: '姐姐/妹妹', emoji: '👧', sentence: 'My sister is nice.' },
                { word: 'baby', phonetic: '/ˈbeɪbi/', meaning: '宝宝', emoji: '👶', sentence: 'The baby is cute.' },
                { word: 'grandpa', phonetic: '/ˈɡrænpɑː/', meaning: '爷爷', emoji: '👴', sentence: 'Grandpa tells stories.' },
                { word: 'grandma', phonetic: '/ˈɡrænmɑː/', meaning: '奶奶', emoji: '👵', sentence: 'Grandma bakes cookies.' },
                { word: 'family', phonetic: '/ˈfæməli/', meaning: '家庭', emoji: '👨‍👩‍👧‍👦', sentence: 'I love my family.' }
            ],
            numbers: [
                { word: 'one', phonetic: '/wʌn/', meaning: '一', emoji: '1️⃣', sentence: 'I have one apple.' },
                { word: 'two', phonetic: '/tuː/', meaning: '二', emoji: '2️⃣', sentence: 'I see two birds.' },
                { word: 'three', phonetic: '/θriː/', meaning: '三', emoji: '3️⃣', sentence: 'Three cats are playing.' },
                { word: 'four', phonetic: '/fɔː/', meaning: '四', emoji: '4️⃣', sentence: 'Four dogs run fast.' },
                { word: 'five', phonetic: '/faɪv/', meaning: '五', emoji: '5️⃣', sentence: 'I have five fingers.' },
                { word: 'six', phonetic: '/sɪks/', meaning: '六', emoji: '6️⃣', sentence: 'Six birds fly high.' },
                { word: 'seven', phonetic: '/ˈsevn/', meaning: '七', emoji: '7️⃣', sentence: 'Seven days in a week.' },
                { word: 'ten', phonetic: '/ten/', meaning: '十', emoji: '🔟', sentence: 'I can count to ten.' }
            ],
            body: [
                { word: 'head', phonetic: '/hed/', meaning: '头', emoji: '😊', sentence: 'I shake my head.' },
                { word: 'hand', phonetic: '/hænd/', meaning: '手', emoji: '✋', sentence: 'I wave my hand.' },
                { word: 'foot', phonetic: '/fʊt/', meaning: '脚', emoji: '👣', sentence: 'My foot is big.' },
                { word: 'eye', phonetic: '/aɪ/', meaning: '眼睛', emoji: '👁️', sentence: 'I see with my eyes.' },
                { word: 'ear', phonetic: '/ɪə/', meaning: '耳朵', emoji: '👂', sentence: 'I hear with my ears.' },
                { word: 'mouth', phonetic: '/maʊθ/', meaning: '嘴巴', emoji: '👄', sentence: 'I eat with my mouth.' },
                { word: 'nose', phonetic: '/nəʊz/', meaning: '鼻子', emoji: '👃', sentence: 'I smell with my nose.' },
                { word: 'hair', phonetic: '/heə/', meaning: '头发', emoji: '💇', sentence: 'My hair is long.' }
            ],
            actions: [
                { word: 'run', phonetic: '/rʌn/', meaning: '跑', emoji: '🏃', sentence: 'I can run fast.' },
                { word: 'jump', phonetic: '/dʒʌmp/', meaning: '跳', emoji: '🦘', sentence: 'The rabbit jumps high.' },
                { word: 'walk', phonetic: '/wɔːk/', meaning: '走', emoji: '🚶', sentence: 'I walk to school.' },
                { word: 'swim', phonetic: '/swɪm/', meaning: '游泳', emoji: '🏊', sentence: 'I like to swim.' },
                { word: 'sing', phonetic: '/sɪŋ/', meaning: '唱歌', emoji: '🎤', sentence: 'The bird sings.' },
                { word: 'dance', phonetic: '/dɑːns/', meaning: '跳舞', emoji: '💃', sentence: 'I can dance.' },
                { word: 'eat', phonetic: '/iːt/', meaning: '吃', emoji: '🍽️', sentence: 'I eat breakfast.' },
                { word: 'sleep', phonetic: '/sliːp/', meaning: '睡觉', emoji: '😴', sentence: 'I sleep at night.' }
            ],
            school: [
                { word: 'book', phonetic: '/bʊk/', meaning: '书', emoji: '📚', sentence: 'I read a book.' },
                { word: 'pen', phonetic: '/pen/', meaning: '钢笔', emoji: '🖊️', sentence: 'I write with a pen.' },
                { word: 'pencil', phonetic: '/ˈpensl/', meaning: '铅笔', emoji: '✏️', sentence: 'This is my pencil.' },
                { word: 'school', phonetic: '/skuːl/', meaning: '学校', emoji: '🏫', sentence: 'I go to school.' },
                { word: 'teacher', phonetic: '/ˈtiːtʃə/', meaning: '老师', emoji: '👩‍🏫', sentence: 'My teacher is nice.' },
                { word: 'friend', phonetic: '/frend/', meaning: '朋友', emoji: '👬', sentence: 'You are my friend.' },
                { word: 'class', phonetic: '/klɑːs/', meaning: '班级', emoji: '🏠', sentence: 'My class is fun.' },
                { word: 'learn', phonetic: '/lɜːn/', meaning: '学习', emoji: '📖', sentence: 'I love to learn.' }
            ]
        };

        // 500个常用英语单词完整列表
        const allWords = [
            { word: 'hello', phonetic: '/həˈləʊ/', meaning: '你好', emoji: '👋', sentence: 'Hello, how are you?' },
            { word: 'goodbye', phonetic: '/ɡʊdˈbaɪ/', meaning: '再见', emoji: '👋', sentence: 'Goodbye, see you later!' },
            { word: 'please', phonetic: '/pliːz/', meaning: '请', emoji: '🙏', sentence: 'Please help me.' },
            { word: 'thank you', phonetic: '/θæŋk juː/', meaning: '谢谢', emoji: '🙏', sentence: 'Thank you very much!' },
            { word: 'sorry', phonetic: '/ˈsɒri/', meaning: '对不起', emoji: '😔', sentence: 'I am sorry.' },
            { word: 'yes', phonetic: '/jes/', meaning: '是的', emoji: '👍', sentence: 'Yes, I can do it.' },
            { word: 'no', phonetic: '/nəʊ/', meaning: '不', emoji: '👎', sentence: 'No, I cannot.' },
            { word: 'good', phonetic: '/ɡʊd/', meaning: '好的', emoji: '👍', sentence: 'This is good.' },
            { word: 'bad', phonetic: '/bæd/', meaning: '坏的', emoji: '👎', sentence: 'This is bad.' },
            { word: 'big', phonetic: '/bɪɡ/', meaning: '大的', emoji: '🔍', sentence: 'The elephant is big.' },
            { word: 'small', phonetic: '/smɔːl/', meaning: '小的', emoji: '🔎', sentence: 'The mouse is small.' },
            { word: 'happy', phonetic: '/ˈhæpi/', meaning: '开心的', emoji: '😊', sentence: 'I am happy today.' },
            { word: 'sad', phonetic: '/sæd/', meaning: '伤心的', emoji: '😢', sentence: 'She feels sad.' },
            { word: 'hot', phonetic: '/hɒt/', meaning: '热的', emoji: '🥵', sentence: 'The soup is hot.' },
            { word: 'cold', phonetic: '/kəʊld/', meaning: '冷的', emoji: '🥶', sentence: 'The ice is cold.' },
            { word: 'fast', phonetic: '/fɑːst/', meaning: '快的', emoji: '💨', sentence: 'The car is fast.' },
            { word: 'slow', phonetic: '/sləʊ/', meaning: '慢的', emoji: '🐌', sentence: 'The snail is slow.' },
            { word: 'beautiful', phonetic: '/ˈbjuːtɪfl/', meaning: '美丽的', emoji: '✨', sentence: 'The flower is beautiful.' },
            { word: 'clean', phonetic: '/kliːn/', meaning: '干净的', emoji: '✨', sentence: 'My room is clean.' },
            { word: 'dirty', phonetic: '/ˈdɜːti/', meaning: '脏的', emoji: '😅', sentence: 'My hands are dirty.' }
        ];

        // 音效系统
        const sounds = {
            correct: new Audio('data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhBSuBzvLZiTYIG2m98OScTgwOUarm7blmFgU7k9n1unEiBC13yO/eizEIHWq+8+OWT'),
            wrong: new Audio('data:audio/wav;base64,UklGRuICAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YcACAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhBSuBzvLZiTYIG2m98OScTgwOUarm7blmFgU7k9n1unEiBC13yO/eizEIHWq+8+OWT')
        };

        function playSound(type) {
            try {
                sounds[type].currentTime = 0;
                sounds[type].play().catch(() => {});
            } catch (e) {}
        }

        function updateScore(points) {
            score += points;
            document.getElementById('score').textContent = score;
            const progress = Math.min((score / 500) * 100, 100);
            document.getElementById('progress').style.width = progress + '%';
        }

        function createCelebration() {
            const celebration = document.getElementById('celebration');
            const emojis = ['⭐', '🌟', '✨', '🎉', '🎊', '🏆', '🎈', '🌈'];
            
            for (let i = 0; i < 20; i++) {
                setTimeout(() => {
                    const star = document.createElement('div');
                    star.className = 'star';
                    star.textContent = emojis[Math.floor(Math.random() * emojis.length)];
                    star.style.left = Math.random() * 100 + '%';
                    star.style.animationDelay = Math.random() * 2 + 's';
                    celebration.appendChild(star);
                    
                    setTimeout(() => star.remove(), 3000);
                }, i * 100);
            }
        }

        function startGame(gameType) {
            currentGame = gameType;
            document.getElementById('game-selection').style.display = 'none';
            document.getElementById('game-instructions').style.display = 'block';
            document.getElementById('back-btn').style.display = 'inline-block';
            
            switch(gameType) {
                case 'words':
                    document.getElementById('instruction-title').textContent = '📚 Basic Words';
                    document.getElementById('instruction-text').textContent = 'Learn 500 common English words! Click each word to learn pronunciation and meaning!';
                    document.getElementById('word-grid').style.display = 'grid';
                    initWordsGame();
                    break;
                case 'sentences':
                    document.getElementById('instruction-title').textContent = '💬 Simple Sentences';
                    document.getElementById('instruction-text').textContent = 'Learn everyday English sentences! Each sentence helps you remember the word!';
                    document.getElementById('sentence-display').style.display = 'block';
                    document.getElementById('next-btn').style.display = 'inline-block';
                    initSentencesGame();
                    break;
                case 'matching':
                    document.getElementById('instruction-title').textContent = '🎯 Word Matching';
                    document.getElementById('instruction-text').textContent = 'Match English words with pictures! Click a word, then click the matching emoji!';
                    document.getElementById('matching-words').style.display = 'grid';
                    initMatchingGame();
                    break;
                case 'categories':
                    document.getElementById('instruction-title').textContent = '🗂️ Categories';
                    document.getElementById('instruction-text').textContent = 'Learn words by themes! Choose your favorite category!';
                    document.getElementById('category-tabs').style.display = 'flex';
                    document.getElementById('word-grid').style.display = 'grid';
                    initCategoriesGame();
                    break;
            }
        }

        function initWordsGame() {
            const grid = document.getElementById('word-grid');
            grid.innerHTML = '';
            
            allWords.slice(0, 12).forEach((item, index) => {
                const card = document.createElement('div');
                card.className = 'word-card';
                card.style.background = `hsl(${index * 30}, 70%, 80%)`;
                card.innerHTML = `
                    <div class="emoji">${item.emoji}</div>
                    <div class="word">${item.word}</div>
                    <div class="phonetic">${item.phonetic}</div>
                    <div class="meaning">${item.meaning}</div>
                `;
                card.onclick = () => handleWordClick(item, card);
                grid.appendChild(card);
            });
        }

        function initSentencesGame() {
            currentIndex = 0;
            displayCurrentSentence();
        }

        function initMatchingGame() {
            const wordPool = document.getElementById('word-pool');
            const picturePool = document.getElementById('picture-pool');
            
            wordPool.innerHTML = '';
            picturePool.innerHTML = '';
            
            // 随机选择4个单词进行配对
            const allItems = [];
            Object.values(englishData).forEach(category => {
                allItems.push(...category);
            });
            
            matchingData = allItems.sort(() => Math.random() - 0.5).slice(0, 4);
            
            // 打乱顺序
            const shuffledWords = [...matchingData].sort(() => Math.random() - 0.5);
            const shuffledPictures = [...matchingData].sort(() => Math.random() - 0.5);
            
            // 创建单词卡片
            shuffledWords.forEach(item => {
                const wordCard = document.createElement('div');
                wordCard.className = 'character-card';
                wordCard.style.background = '#FFE4B5';
                wordCard.textContent = item.word;
                wordCard.dataset.meaning = item.meaning;
                wordCard.dataset.emoji = item.emoji;
                wordCard.onclick = () => handleMatchingClick(wordCard, 'word');
                wordPool.appendChild(wordCard);
            });
            
            // 创建图片卡片
            shuffledPictures.forEach(item => {
                const pictureCard = document.createElement('div');
                pictureCard.className = 'picture-card';
                pictureCard.style.background = '#E6FFE6';
                pictureCard.textContent = item.emoji;
                pictureCard.dataset.meaning = item.meaning;
                pictureCard.dataset.emoji = item.emoji;
                pictureCard.onclick = () => handleMatchingClick(pictureCard, 'picture');
                picturePool.appendChild(pictureCard);
            });
            
            matchedPairs = 0;
        }

        function initCategoriesGame() {
            displayCategory(currentCategory);
        }

        function displayCurrentSentence() {
            const current = allWords[currentIndex % allWords.length];
            document.getElementById('current-word').textContent = current.word;
            document.querySelector('.emoji').textContent = current.emoji;
            document.querySelector('.big-phonetic').textContent = current.phonetic;
            document.querySelector('.big-meaning').textContent = current.meaning;
            document.querySelector('.sentence').textContent = current.sentence;
        }

        function displayCategory(category) {
            const grid = document.getElementById('word-grid');
            grid.innerHTML = '';
            
            englishData[category].forEach((item, index) => {
                const card = document.createElement('div');
                card.className = 'word-card';
                card.style.background = `hsl(${index * 30}, 70%, 80%)`;
                card.innerHTML = `
                    <div class="emoji">${item.emoji}</div>
                    <div class="word">${item.word}</div>
                    <div class="phonetic">${item.phonetic}</div>
                    <div class="meaning">${item.meaning}</div>
                `;
                card.onclick = () => handleWordClick(item, card);
                grid.appendChild(card);
            });
        }

        function switchCategory(category) {
            currentCategory = category;
            document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
            event.target.classList.add('active');
            displayCategory(category);
        }

        function handleWordClick(item, card) {
            card.classList.add('correct');
            playSound('correct');
            updateScore(1);
            
            // 朗读单词
            try {
                const utterance = new SpeechSynthesisUtterance(item.word);
                utterance.lang = 'en-US';
                speechSynthesis.speak(utterance);
            } catch (e) {}
            
            setTimeout(() => {
                card.classList.remove('correct');
            }, 1000);
        }

        function handleMatchingClick(card, type) {
            if (card.classList.contains('matched')) return;
            
            // 清除之前的选择样式
            document.querySelectorAll('.character-card, .picture-card').forEach(c => {
                c.classList.remove('selected');
            });
            
            if (!selectedCard) {
                // 第一次选择
                selectedCard = card;
                card.classList.add('selected');
            } else if (selectedCard === card) {
                // 点击同一个卡片，取消选择
                selectedCard.classList.remove('selected');
                selectedCard = null;
            } else {
                // 第二次选择
                if (selectedCard.dataset.meaning === card.dataset.meaning) {
                    // 配对成功
                    selectedCard.classList.remove('selected');
                    selectedCard.classList.add('matched');
                    card.classList.add('matched');
                    playSound('correct');
                    updateScore(5);
                    matchedPairs++;
                    
                    // 朗读单词
                    try {
                        const matchedWord = matchingData.find(item => item.meaning === selectedCard.dataset.meaning);
                        const utterance = new SpeechSynthesisUtterance(matchedWord.word);
                        utterance.lang = 'en-US';
                        speechSynthesis.speak(utterance);
                    } catch (e) {}
                    
                    if (matchedPairs === 4) {
                        setTimeout(() => {
                            alert('🎉 Great job! You completed all matches! Get 20 magic stars!');
                            createCelebration();
                            initMatchingGame(); // 重新开始新一轮
                        }, 1000);
                    }
                } else {
                    // 配对失败
                    selectedCard.classList.add('wrong');
                    card.classList.add('wrong');
                    playSound('wrong');
                    
                    setTimeout(() => {
                        selectedCard.classList.remove('wrong', 'selected');
                        card.classList.remove('wrong');
                    }, 500);
                }
                selectedCard = null;
            }
        }

        function nextWord() {
            currentIndex++;
            if (currentGame === 'sentences') {
                displayCurrentSentence();
            }
            updateScore(2);
            
            // 朗读单词
            try {
                const current = allWords[currentIndex % allWords.length];
                const utterance = new SpeechSynthesisUtterance(current.word);
                utterance.lang = 'en-US';
                speechSynthesis.speak(utterance);
            } catch (e) {}
        }

        function backToMenu() {
            document.getElementById('game-selection').style.display = 'block';
            document.getElementById('game-instructions').style.display = 'none';
            document.getElementById('sentence-display').style.display = 'none';
            document.getElementById('category-tabs').style.display = 'none';
            document.getElementById('word-grid').style.display = 'none';
            document.getElementById('matching-words').style.display = 'none';
            document.getElementById('back-btn').style.display = 'none';
            document.getElementById('next-btn').style.display = 'none';
            currentGame = null;
            matchedPairs = 0;
            selectedCard = null;
            matchingData = [];
        }

        // 添加可爱的动物朋友
        function addAnimalFriends() {
            const animals = ['🐶', '🐱', '🐰', '🐻', '🦁', '🐸', '🐵', '🦊', '🐼', '🦋'];
            const container = document.querySelector('.container');
            
            animals.forEach((animal, index) => {
                const friend = document.createElement('div');
                friend.style.position = 'absolute';
                friend.style.fontSize = '3rem';
                friend.textContent = animal;
                friend.style.left = (5 + index * 9) + '%';
                friend.style.top = (5 + Math.random() * 15) + '%';
                friend.style.animation = `bounce ${2 + index * 0.3}s infinite`;
                container.appendChild(friend);
            });
        }

        // 页面加载完成后添加动物朋友
        window.addEventListener('load', addAnimalFriends);
    </script>
</body>
</html>
